<template>
<div class="outline">
      <h2>小龙坎餐饮管理</h2>
      <div class="back">
      </div>
      <div class="myinput">
          <span>账号: </span> 
          <el-input class="input" placeholder="请输入账号" v-model="user" clearable>
          </el-input><br>
          <span>密码: </span>
          <el-input class="input" placeholder="请输入密码" v-model="password" clearable>
          </el-input>
     </div>

     <div class="anniu">
         <el-button type="primary" @click="login">登录</el-button>
         <el-button @click="cancel">注册</el-button>
     </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      user: '',
      password: ''
    };
  },
  methods: {
    login () {
      if(this.user=='' || this.password==''){
        this.$message({
            type: 'info',
            message: '请输入账号密码!'
          });
      }else{
        this.$axios.post('http://124.220.177.66:8081/login', {
        data: {
          username: this.user,
          password: this.password
        }
      }).then(res => {
        if(res.data.code == 200){
          console.log(res);
          this.$message({
            type: 'success',
            message: '登录成功!'
          });
          this.$router.push("/home")
        }
      })
      }
    },
    cancel() {
      this.user = "";
      this.password = "";
      this.$router.push("/register");
    },
  },
  created () {

  },
  mounted () {

  },
  computed: {

  }
};
</script>

<style scoped lang="less">
.outline{
   width: 100%;
    height: 100%;
    position: relative;
    background: url() no-repeat;
    background-size: 100% 800px;
    background-color: rgb(70, 170, 170);
}
.outline>h2{
    font-size: 40px;
    color: rgb(7, 162, 252);
    margin: 0;
    margin-left: -4%;
    padding: 6% 0 10px 10px;
}
.back{
    width: 30%;
    height: 35%;
    background-color: #EFE4CF;
    border-radius: 10px;
    box-shadow: 5px 5px 50px #EFE4CF;
    opacity: 0.2;
    position: absolute;
    border: 2px solid rgb(0, 60, 255);
    left: 33%;
    top: 20%;
}
.myinput{
    width: 30%;
    height: 35%;
    position: absolute;
    left: 33%;
    top: 20%;
    border-radius: 10px;
    span{
        color: rgb(1, 238, 255);
    }
}
.input{
    width: 60%;
    opacity: 0.8;
    margin-top: 40px;
}
.anniu{ 
    width: 20%;
    height: 8%;
    position: absolute;
    left: 39%;
    top: 46%;
    button{
        margin: 0 20px;
    }
}
</style>
